<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽</title>
    <style>
        #box{width: 500px;height: 500px;}
       #box div{width: 100px;height: 100px;position: relative;float: left;margin: 10px;}
       #box div img{width: 100px;height: 100px;position: absolute;left: 0px;top: 0px;}
    </style>
</head>
<body >
    <div id="box"><div><img src="./img/微信图片_20220402112326.jpg" alt=""></div>
    <div><img src="./img/微信图片_202204021123261.jpg" alt=""></div>
    <div><img src="./img/微信图片_202204021123262.jpg" alt=""></div>
    <div><img src="./img/微信图片_202204021123263.jpg" alt=""></div>
</div>
    
    <script>
        box.onmousedown = function(e){
            e = e.event || window.event;
            let t = e.target || e.srcElement;
            e.preventDefault();
            if(t.nodeName == 'IMG'){
                let x = e.clientX - t.offsetLeft;
                let y = e.clientY - t.offsetTop; 
                document.onmousemove = function(e){
                    e = e || window.event;
                    let lefts = e.clientX - x;
                    let tops = e.clientY - y; 
                    console.log(document.documentElement.clientHeight);
                // if (t.lefts < 0) {
                //     lefts = 0;
                // }
                // if (lefts >= document.documentElement.clientWidth - t.offsetWidth) {
                //     lefts = document.documentElement.clientWidth - t.offsetWidth;
                // }
                // if (tops < 0) {
                //     tops = 0;
                // } 
                // if (tops > document.documentElement.clientHeight - t.offsetHeight) {
                //     tops = document.documentElement.clientHeight - t.offsetHeight;
                // }

                    
                    t.style.left =  lefts + "px";
                    t.style.top =  tops + "px";
               }
               document.onmouseup = function(e){
                e = e || window.event;
                 document.onmousemove = null;
                   document.onmouseup = null;
               }
            }
           
        }
        
    </script>
</body>
</html>